import React, { memo, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Card, Slider, Space } from '@arco-design/web-react';
import { IconSound, IconMute } from '@arco-design/web-react/icon';
export default memo(function MusicVoice() {
  const dispatch = useDispatch();
  const voiceSize = useSelector(state => state.voiceSize)
  const [value=voiceSize, setValue] = useState();
  const voiceChange = e => {
    setValue(e);
    dispatch({
      type: 'voiceSize',
      data: e,
    });
  };
  return (
    <Card title='音频大小'>
      <Space>
        <Space>
          <IconMute
            style={{
              fontSize: 16,
              color: value > 0 ? 'var(--color-text-4)' : 'var(--color-text-1)',
            }}
          />
          <Slider
            value={value}
            onChange={e => {
              voiceChange(e);
            }}
            style={{ width: 200 }}
          />
          <IconSound
            style={{
              fontSize: 16,
              color:
                value === 0 ? 'var(--color-text-4)' : 'var(--color-text-1)',
            }}
          />
        </Space>
      </Space>
    </Card>
  );
});
